<template>
  <div>
    <div class="content-head">
      <a-row>
        <a-col span="12">
          <a-button type="primary" icon="plus" style="margin-right: 8px;" @click="() => {$router.push({name:'data_household_operation',params:{id:'add'}})}">添加</a-button>
          <a-button type="primary" style="margin-right: 8px;" @click="() => { $router.push({name:'household-import'}) }">导入</a-button>
          <!--<a-popconfirm title="确定要迁出当前所选住户?" @confirm="moveOut()">-->
            <a-button :disabled="$common.isEmpty(selectedRowKeys)" @click="hout()">迁出</a-button>
          <!--</a-popconfirm>-->
        </a-col>
        <a-col span="10" offset="2">
          <a-col span="18">
            <a-input-search style="width: 240px;float: right;" v-model="gj_name_value" placeholder="房号/车位号/车牌号/住户" @search="onSearch"></a-input-search>
          </a-col>
          <!--<a-input-group>-->
            <!--<a-input-search style="width: 300px;float: right;" placeholder="姓名/房号/手机/业主卡号" enterButton @search="onSearch"/>-->
          <!--</a-input-group>-->
          <a-button @click="searchModal">
            <a-icon type="filter" />
          </a-button>
        </a-col>
        <a-modal
                title="高级搜索"
                :visible="searchVisible"
                @ok="searchOk"
                :confirmLoading="confirmLoading"
                @cancel="searchCancel"
        >
          <a-row>
            <a-form>
              <a-col span="24">
                <a-form-item label="小区" :label-col="labelCol" :wrapper-col="wrapperCol">
                  <a-select placeholder="请选择小区">
                    <a-select-option v-for="(item,index) in bd_info" :key="index" :value="item.id" @click="bd_click(item.id)">{{item.name}}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col span="24">
                <a-form-item label="住户身份" :label-col="labelCol" :wrapper-col="wrapperCol">
                  <a-select placeholder="请选择身份">
                    <a-select-option v-for="(item,index) in user_type" :key="index" :value="index" @click="user_type_click(index)">{{item}}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col span="24">
                <a-form-item label="登录验证" :label-col="labelCol" :wrapper-col="wrapperCol">
                  <a-select placeholder="登录验证">
                    <a-select-option value="0" @click="log_click(0)">全部</a-select-option>
                    <a-select-option value="1" @click="log_click(1)">已验证</a-select-option>
                    <a-select-option value="2" @click="log_click(2)">未验证</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col span="24">
                <a-form-item label="数据标签" :label-col="labelCol" :wrapper-col="wrapperCol">
                  <a-select placeholder="请选择标签">
                    <a-select-option v-for="(item,index) in labels" :key="index" :value="item.id" @click="lab_click(item.id)">{{item.name}}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col span="24">
                <a-form-item label="关键词" :label-col="labelCol" :wrapper-col="wrapperCol">
                  <a-input v-on:keyup="gj_name" v-model="name" placeholder="房号/车位号/车牌号/住户/手机号/备注"></a-input>
                </a-form-item>
              </a-col>
            </a-form>
          </a-row>
        </a-modal>
      </a-row>
    </div>
    <div class="content-body">
      <s-table ref="table" :columns="columns" :pageURI='true' :data="dataSource" :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" rowKey="uniKey" :loading="loading">
        <template slot="type" slot-scope="text,record">
          <span>{{typeList[record['type']]}}</span>
        </template>
        <template slot="status" slot-scope="text,record">
          <span>{{record['vali_status'] == 1 ? '长期' : '短期'}}</span>
        </template>
        <template slot="operation" slot-scope="text,record">
          <a-dropdown>
            <a class="ant-dropdown-link" href="javascript:void(0);">操作 <a-icon type="down" /></a>
            <a-menu slot="overlay" @click="operation($event,record)">
              <a-menu-item key="1">详情</a-menu-item>
              <a-menu-item key="2">编辑</a-menu-item>
              <a-menu-item key="4" @click="hout([record.uniKey])">
                <!--<a-popconfirm title="确定要迁出当前住户?" @confirm="moveOut([record.uniKey])">-->
                <a href="javascript:void(0);">迁出</a>
                <!--</a-popconfirm>-->
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </template>
      </s-table>
      <a-modal
              title="迁出"
              :visible="exportVisible"
              @ok="moveOut()"
              @cancel="exportCancel()"
      >
        <a-row>
          <a-form>
            <a-col span="24">
              <a-form-item label="选择" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-select placeholder='选择' @change="m_c_type">
                  <a-select-option v-for="(item,index) in m_list" :key="index" :value="index">{{item}}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col span="24">
              <a-form-item label="备注" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-input v-model="bz"></a-input>
              </a-form-item>
            </a-col>
          </a-form>
        </a-row>
      </a-modal>
    </div>
  </div>
</template>

<script>
    import { ACCESS_TOKEN } from '@/store/mutation-types'
    import {STable} from '@/components'
    import { mapGetters } from 'vuex'
    export default {
        name: 'data_household_index_moved_in',
        data() {
            return {
                user_type:[],
                searchVisible:false,
                exportVisible:false,
                gj_name_value:'',
                confirmLoading:false,
                name:name,
                bd_info:[],
                labels:[],
                bd_id:0,
                bz:'',
                m_type:0,
                user_type_val:0,
                log_val:0,
                lab_val:0,
                m_list:[],
                h_u:'',
                // token:this.$ls.get(ACCESS_TOKEN),
                loading:false,
                labelCol:{xs:{span:24},sm:{span:8}},
                wrapperCol:{xs:{span:24},sm:{span:10}},
                columns:[{ title:'手机', dataIndex:'phone' }, { title: '姓名', dataIndex:'name' }, { title: '小区', dataIndex:'bd_info_name' }, { title: '楼宇', dataIndex:'building_name' }, { title: '单元', dataIndex:'unit_name' }, { title: '房号', dataIndex:'houses_name' }, { title: '住户身份', dataIndex:'type', scopedSlots:{customRender:'type'} },
                    {
                        title: '有效期',
                        dataIndex: 'vali_status',
                        scopedSlots:{customRender:'status'}
                    }, { title: '操作', dataIndex:'operation', scopedSlots:{customRender:'operation'} }],
                typeList: [undefined,'业主本人','亲属', '租客', '朋友', '同事', '保姆',  '司机', '装修人员', '其它'], // 住户身份数据
                queryParam:{},
                cur_page:1,
                dataSource:parameter => {
                    this.cur_page=parameter.pageNo
                    return this.getList(Object.assign(parameter, this.queryParam))
                        .then(res => {
                            return res
                        })
                },
                selectedRowKeys: []
            }
        },
        components:{STable},
        mounted() {
            this.getMtype();
            this.getBdList();
            this.getUseList();
            this.getLabList();
        },
        methods:{
            ...mapGetters(['token', 'pmsArId', 'nowMg']),
            bd_click(v){
                this.bd_id = v;
            },
            user_type_click(v){
                this.user_type_val = v;
            },
            log_click(v){
                this.log_val = v;
            },
            lab_click(v){
                this.lab_val = v;
            },
            gj_name(v){
                this.gj_name_value = v.target.value;
            },
            searchOk() {
                this.searchVisible = false;
                this.queryParam['bd_id'] = this.bd_id;
                this.queryParam['user_type_val'] = this.user_type_val;
                this.queryParam['log_val'] = this.log_val;
                this.queryParam['lab_val'] = this.lab_val;
                this.queryParam['gj_name'] = this.gj_name_value;
                this.$refs.table.refresh(true);
            },
            searchModal() {
                this.searchVisible = true
            },
            searchCancel() {
                this.searchVisible = false
            },
            m_c_type(v){
                this.m_type = v;
            },
            exportCancel(){
                this.exportVisible = false;
            },
            hout(v){
                if (v) {
                    this.selectedRowKeys = v;
                }
                this.exportVisible = true;
            },
            // 住户列表
            getList(param) {
                return new Promise((resolve, reject) => {
                    this.loading = true;
                    this.axios({
                        method:'post',
                        url:'/household/getList',
                        data:Object.assign(param,{token:this.token(),status:1})
                    }).then(res => {
                        resolve(res.data);
                    }).catch(err => {
                        this.$message.error('服务器发生错误...',2);
                    }).finally(() => {
                        this.loading = false;
                    });
                });
            },
            getMtype() {
                return new Promise((resolve, reject) => {
                    this.loading = true;
                    this.axios({
                        method:'post',
                        url:'/household/get_type',
                        data:Object.assign({token:this.token(),status:1})
                    }).then(res => {
                        this.m_list = res.data.data;
                    }).catch(err => {
                        this.$message.error('服务器发生错误...',2);
                    }).finally(() => {
                        this.loading = false;
                    });
                });
            },
            getBdList(){
                this.axios({
                    method:'get',
                    url:'/community/get_bd_config_list',
                    params:{token:this.token(),ar_id: this.pmsArId(),cm_mg_id: this.nowMg()}
                }).then(res => {
                    let { code,msg,data } = res;
                    if(code === 0){
                        let ifo = {id:0,name:'所有小区'};
                        data.unshift(ifo);
                        this.bd_info=data
                    }else this.$message.warning(msg);
                }).catch(err => {
                    this.$message.error('服务器发生错误...');
                })
            },
            getUseList(){
                this.axios({
                    method:'get',
                    url:'/community/get_user_list',
                    params:{token:this.token(),ar_id: this.pmsArId(),cm_mg_id: this.nowMg()}
                }).then(res => {
                    let { code,msg,data } = res;
                    if(code === 0){
                        this.user_type = data
                    }else this.$message.warning(msg);
                }).catch(err => {
                    this.$message.error('服务器发生错误...');
                })
            },
            getLabList(){
                this.axios({
                    method:'get',
                    url:'/community/get_lab_list',
                    params:{token:this.token(),ar_id: this.pmsArId(),cm_mg_id: this.nowMg()}
                }).then(res => {
                    let { code,msg,data } = res;
                    if(code === 0){
                        let ifo = {id:0,name:'全部'};
                        data.unshift(ifo);
                        this.labels = data
                    }else this.$message.warning(msg);
                }).catch(err => {
                    this.$message.error('服务器发生错误...');
                })
            },
            // 住户筛选
            onSearch(val) {
                this.queryParam['search'] = val;
                this.$refs.table.refresh(true);
            },
            onSelectChange (selectedRowKeys, selectedRows) {
                this.selectedRowKeys = selectedRowKeys
            },
            // 迁出住户
            moveOut(ids = this.selectedRowKeys) {
                // console.log(ids);return false;
                this.axios({
                    method:'post',
                    url:'/household/moveOut',
                    data:{bz:this.bz,type:this.m_type,token:this.token(),ids},
                }).then(res => {
                    if(res.code === 0){
                        this.$message.success(res.msg,2);
                        this.$refs.table.refresh();
                    }else this.$message.warning(res.msg,2);
                }).catch(err => {
                    this.$message.error('服务器发生错误...',2);
                })
            },
            // 房屋操作
            operation({ key },info) {
                const _this = this;
                if(key === '1') _this.$router.push({name:'data_household_detail',params:{id:info.id,cur_page:this.cur_page}});
                if(key === '2') _this.$router.push({name:'data_household_operation',params:{id:info.id,cur_page:this.cur_page}});
                // if(key === '5'){
                //   _this.$confirm({
                //     title: `确定要删除\"${info.houses_name}\"房？`,
                //     content:'删除后将不可恢复',
                //     onOk() {
                //       return new Promise((resolve, reject) => {
                //         _this.axios({
                //           method:'post',
                //           url:'/houses/delHouses',
                //           data:{token:_this.token,id:info.id},
                //         }).then(res => {
                //           if(res.code === 0){
                //             _this.$message.success(res.msg,2);
                //             _this.$refs.table.refresh();
                //             resolve();
                //           }else reject(res.msg);
                //         }).catch(err => {
                //           _this.$message.error('服务器发生错误...',2);
                //         })
                //       }).catch((msg) => _this.$message.error(msg,2));
                //     },
                //     onCancel() {},
                //   });
                // }
            }
        }
    }
</script>

<style scoped>
  .content-body{
    padding-top:20px;
  }
</style>